<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/public.css"/>
		<link rel="stylesheet" type="text/css" href="./css/test.css"/>
		<link rel="stylesheet" href="./css/animate.min.css">
	</head>
	<body>
		<!--顶部导航 logo-->
		<div class="center-top">
			<div class="center-top-main">
				<div class="logo">
					<img src="img/logo.png" alt=""/>
				</div>
				<div class="center-name">学习中心</div>
				<ul>
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">课程中心</a>
					</li>
					<li>
						<a href="#">模拟题库</a>
					</li>
					<li>
						<img src="./img/thumb.png"/>
						<a href="#" class="my-class">我的网课</a>
					</li>
					<li>
						<img src="./img/shopcar.png"/>
						<a href="#">购课车</a>
					</li>
					<li>
						<img src="./img/tips.png"/>
						<a href="#">消息</a>
					</li>
					<li class="download-box">
						<a href="#" class="download">APP下载</a>
						<img src="./img/up.png" class="download-up"/>
						<img src="./img/downh.png" class="download-down"/>
						<div class="er-box">
							<img src="img/er.png"/>
							<span>雨露众德APP</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!--顶部个人基本信息-->
		<div class="person-info">
			<div class="person-info-main">
				<div class="person-thumb">
					<img src="./img/er.png"/>
				</div>
				<div class="person-name-rank">
					<div class="person-name">Z夯实</div>
					<div class="person-rank">
						<img src="img/king.png"/>
						<span>注册会员</span>
					</div>
				</div>
				<div class="person-info-right">
					<div class="person-cards">
						<div class="person-cards-num">1张</div>
						<div class="person-cards-name">优惠券</div>
					</div>
					<div class="person-cards">
						<div class="person-cards-num">123</div>
						<div class="person-cards-name">积分</div>
					</div>
					<div class="signin">
						<div class="signin-btn">签到领积分</div>
						<div class="signin-tip">您今天还没有签到</div>
					</div>
				</div>
				<div class="center-ad">
					<img src="img/center-ad.jpg" alt=""/>
				</div>
				<div class="my-message">
					您有<em>1</em>条未读信息
					<span class="close-message"> X </span>
				</div>
			</div>
		</div>
		<!--主要内容-->
		<div class="center-main">
			<div class="test-card-box">
				<p class="countdown-box">
					<img src="img/countdown-time.png" alt=""/>
					<span class="countdown-time">  
						剩余：
						<span id="countdown">00:00:00</span>
					</span>
					<span class="stop-start-btn" id="stop">
						<img src="img/stop.png" alt="" id="sp_pic"/>
						<span id="stop_str">暂停</span>
					</span>
				</p>
				<div class="test-card-more">
					<h1>
						单选题
						<span>（每题1分，共35题）</span>
					</h1>
					<div class="line"></div>
					<div class="test-card-content">
						<ul id="list">
							<li class="write">1</li>
							<li class="wrong">2</li>
						</ul>
					</div>
					<p class="wrong-write-tip">
						<span>
							<i class="write-tip"></i>
							正确
						</span>
						<span>
							<i class="wrong-tip"></i>
							错误
						</span>
					</p>
					<button class="over-test-btn">结束答题</button>
					<div class="line"></div>
					<div class="green-eye">
						<input type="checkbox" id="green-eye"/>
						<label for="green-eye">护眼模式</label>
					</div>
				</div>
			</div>
			<div class="test-paper-box">
				<h5>
					<img src="img/map.png" alt=""/>
					雨露众德题库 > 
					<span>第一节真题模拟</span>
				</h5>
				<div class="test-paper-title-desc">
					<h1>2020年二级建造师考试真题</h1>
					<p>
						<span>共计：120分</span>
						<span>共计：100小题</span>
						<span>答题时间：150分钟</span>
					</p>
					<div class="only-more">
						<span class="cur">单选题</span>
						<span>多选题</span>
					</div>
				</div>
				<div class="test-paper-type">
					<h3>一、单选题<span>（共80道，每题一分，每题的备选项中，只有一个最符合题意）</span></h3>
				</div>
				<div class="test-paper-content">
					<h4>1、某耐心的话二建建筑设计师设计时，某耐心的话二建建筑设计师设计时某耐心的话二建建筑设计师设计时某耐心的话二建建筑设计师设计时（   ）</h4>
					<ul>
						<li class="cur">
							<span>A</span>
							某耐心的话二建建筑设计师设计时，某耐心的话二
						</li>
						<li>
							<span>B</span>
							某耐心的话二建建筑设计师设计时，某耐心的话二
						</li>
						<li>
							<span>C</span>
							某耐心的话二建建筑设计师设计时，某耐心的话二
						</li>
						<li>
							<span>D</span>
							某耐心的话二建建筑设计师设计时，某耐心的话二
						</li>
					</ul>
					<p class="test-do-btn">
						<span>
							<img src="img/shoucang.png"/>
							收藏
						</span>
						<span>
							<img src="img/jubao.png"/>
							纠错
						</span>
					</p>
					<p class="pre-next-btn">
						<span id="pre"> < 上一页</span>
						<span class="see-answer">
							查看答案
							<img src="img/sdown.png" alt=""/>
						</span>
						<span id="next">下一页 > </span>
					</p>
					<div class="test-explain-box" style="display: none;">
						<h2>
							<span class="write">正确答案：D</span>
							<span class="wrong">我的答案：C</span>
						</h2>
						<p>
							<span>参考解析：</span>
							参照《实务教材》PBI场内设置的丙类仓库是，必须采取防火墙和耐防火不低于1.6度的活版与厂房。
						</p>
						<p>
							<span>题目统计：</span>
							本题156人做过，正确率97.23%，易错选项。
						</p>
						<p>
							<span>个人统计：</span>
							本题我做过2次，正确率97.23%，易错选项。
						</p>
						<p>
							<span>做题笔记：</span>
							<span class="bj-btn">
								<img src="img/bj.png" alt=""/>
								添加笔记
							</span>
						</p>
						<div class="my-biji-box">
							<p class="my-other-btn">
								<span class="cur">网友笔记</span>
								<i></i>
								<span>我的笔记</span>
							</p>
							<ul>
								<li>
									<div class="thumb"></div>
									<div class="username-question">
										<p class="username">匿名用户</p>
										<p class="question-content">
											我的问题再次请回答我的的问题好的好的号多好的，我的问题再次请回答我的的问题好的好的号多好的
											我的问题再次请回答我的的问题好的好的号多好的，我的问题再次请回答我的的问题好的好的号多好的
											我的问题再次请回答我的的问题好的好的号多好的，我的问题再次请回答我的的问题好的好的号多好的
										</p>
									</div>
									<div class="zan-btn">
										<img src="img/zan.png" alt=""/>
										231赞
									</div>
								</li>
								<li>
									<div class="thumb"></div>
									<div class="username-question">
										<p class="username">匿名用户</p>
										<p class="question-content">
											我的问题再次请回答我的的问题好的好的号多好的，我的问题再次请回答我的的问题好的好的号多好的
											我的问题再次请回答我的的问题好的好的号多好的，我的问题再次请回答我的的问题好的好的号多好的
											我的问题再次请回答我的的问题好的好的号多好的，我的问题再次请回答我的的问题好的好的号多好的
										</p>
									</div>
									<div class="zan-btn">
										<img src="img/zan.png" alt=""/>
										231赞
									</div>
								</li>
								<li>
									<div class="thumb"></div>
									<div class="username-question">
										<p class="username">匿名用户</p>
										<p class="question-content">
											我的问题再次请回答我的的问题好的好的号多好的，我的问题再次请回答我的的问题好的好的号多好的
											我的问题再次请回答我的的问题好的好的号多好的，我的问题再次请回答我的的问题好的好的号多好的
											我的问题再次请回答我的的问题好的好的号多好的，我的问题再次请回答我的的问题好的好的号多好的
										</p>
									</div>
									<div class="zan-btn">
										<img src="img/zan.png" alt=""/>
										231赞
									</div>
								</li>
							</ul>
							<div class="page-box">
								<ul>
									<li>上一页</li>
									<li>1</li>
									<li class="currentpage">2</li>
									<li>3</li>
									<li>...</li>
									<li>100</li>
									<li>下一页</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--底部-->
		<footer>
			<div class="footer-box">
				<div class="footer-top">
					<div class="footer-logo">
						<img src="img/flogo.png"/>
					</div>
					<div class="footer-nav">
						<ul>
							<li>
								<a href="#">了解雨露</a>
							</li>
							<li>
								<a href="#">帮助与支持</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="#">关于我们</a>
							</li>
							<li>
								<a href="#">联系我们</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="#">网站声明</a>
							</li>
							<li>
								<a href="#">反馈建议</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="#">售后中心</a>
							</li>
							<li>
								<a href="#">侵权举报</a>
							</li>
						</ul>
					</div>
					<div class="app-wechat">
						<div class="app">
							<div class="app-img">
								<img src="img/er1.png" />
							</div>
							<p>下载雨露众德app</p>
						</div>
						<div class="app">
							<div class="app-img">
								<img src="img/er2.png" />
							</div>
							<p>关注微信公众号</p>
						</div>
					</div>
				</div>
				<div class="footer-bottom">
					<p>全国客服热线：400-1767-214 京ICP备17069128号-1 京公网安备17069128</p>
					<p>Copyright 2017-2020 雨露众德教育集团</p>
				</div>
			</div>
		</footer>
		<script src="./js/public.js"></script>
		<script>
			//分页
			var aPageList = document.getElementsByClassName('page-box')[0].getElementsByTagName('li');
			for(var i=1;i<aPageList.length-1;i++){
				aPageList[i].onclick = function(){
					for(var j = 1;j<aPageList.length-1;j++){
						aPageList[j].className = ''
					}
					this.className = 'currentpage'
				}
			}
			var oBox = document.getElementById('list');
			var str = oBox.innerHTML;
			for(var i = 3;i<100;i++){
				str += '<li>' + i + '</li>'
			}
			oBox.innerHTML = str;
			
			//上一页 下一页
			var oScrollBox = document.getElementsByClassName('test-paper-content')[0];
			var oNextBtn = document.getElementById('next');
			var oPreBtn = document.getElementById('pre');
			oNextBtn.onclick = function(){
				oScrollBox.className += ' animated slideInRight';
				setTimeout(function(){
					oScrollBox.className = 'test-paper-content';
				},1000)
			}
			oPreBtn.onclick = function(){
				oScrollBox.className += ' animated slideInLeft';
				setTimeout(function(){
					oScrollBox.className = 'test-paper-content';
				},1000)
			}
			
			//倒计时
			var time = 3600 + 5;
			var timer = null;
			function countdown(){
				time--;
				var h = Math.floor(time/3600);
				var m = Math.floor(time%3600/60);
				var s = time%3600%60;
				if(h<10){
					h = '0' + h;
				}
				if(m<10){
					m = '0' + m;
				}
				if(s<10){
					s = '0' + s;
				}
				if(h === '00' && m === '00' && s === '00'){
					clearInterval(timer);
				}
				document.getElementById('countdown').innerHTML = h + ':' + m + ':' + s;
			}
			timer = setInterval(countdown,1000);
			
			//开始暂停
			document.getElementById('stop').onclick = function(){
				if(document.getElementById('stop_str').innerHTML === '暂停'){
					clearInterval(timer);
					timer = null;
					document.getElementById('stop_str').innerHTML = '继续';
					document.getElementById('sp_pic').setAttribute('src','./img/play.png');
				}
				else{
					document.getElementById('stop_str').innerHTML = '暂停';
					document.getElementById('sp_pic').setAttribute('src','./img/stop.png');
					timer = setInterval(countdown,1000);
				}
			}
			
			//护眼模式#d3f1ca
			document.getElementById('green-eye').onchange = function(){
				if(this.checked){
					document.getElementsByClassName('center-main')[0].style.background = '#d3f1ca';
				}
				else{
					document.getElementsByClassName('center-main')[0].style.background = '#ffffff';
				}
			}
			
			//查看答案
			document.getElementsByClassName('see-answer')[0].onclick = function(){
				this.className += ' cur';
				document.getElementsByClassName('test-explain-box')[0].style.display = 'block';
			}
		</script>
	</body>
</html>
